import Vue from 'vue'

const app = new Vue({
    // el: '#root',
    // template: '<div ref="testRef">{{text}}</div>',
    data: {
        text: 1111
    },
    beforeCreate () {
        console.info('beforeCreate', 'this is $el', this.$el)
    },
    created () {
        console.info('created', 'this is $el', this.$el)
    },

    beforeMount () {
        console.info('beforeMount', 'this is $el', this.$el)
    },
    mounted () {
        // 将el的组件挂载到vue(注释el会打印出来)
        console.info('mounted', 'this is $el', this.$el)
    },
    beforeUpdate () {
        console.info('beforeUpdate', 'this is', this)
    },
    updated () {
        console.info('updated', 'this is', this)
    },
    activated () {
        console.info('activated', 'this is', this)
    },
    deactivated () {
        console.info('deactivated', 'this is', this)
    },

    beforeDestroy () {
        console.info('beforeDestroy', 'this is', this)
    },
    destroyed () {
        console.info('destroyed', 'this is', this)
    },
    render (h) {
        // throw new TypeError('render err')
        console.info('render function invoked')
        return h('div', {}, this.text)
    },
    renderError (h, err) { // 当前组件（本组件，子组件不属于这个范畴）
        return h('pre', { style: { color: 'red' } }, err.stack)
    }
})

app.$mount('#root')

// 测试 update 和 beforeUpdate
// setInterval(() => {
//     app.text = app.text += 1
// }, 2000)

setTimeout(() => {
    app.$destroy()
}, 1000)